<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开启头部工具栏 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layadmin/style/admin.css" media="all">
</head>

<body>
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a lay-href="">主页</a>
            <a><cite>组件</cite></a>
            <a><cite>数据表格</cite></a>
            <a><cite>开启头部工具栏</cite></a>
        </div>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">{$fname}<i class="layui-icon layui-icon-add-1 add-photo"></i></div>
                    <div class="layui-card-body">
                        <div class="layui-collapse" lay-accordion="">
                            {volist name="$album" id="v"}
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 60px;">
                                    <a href="/admin/photo/index/fid/{$fid}/tid/{$v.id}.html">{$v.title}</a>
                                    <i class="layui-icon layui-icon-edit add-photo" style="position: absolute;right: 40px;" uppid="{$v.id}"></i>
                                    <i class="layui-icon layui-icon-delete del-photo" style="position: absolute;right: 15px;" uppid="{$v.id}"></i>
                                </h2>
                                <div class="layui-colla-content {if condition='$v.id eq $tid'}layui-show {/if}">
                                    <img src="{$v.thumb}" width="150">
                                    {$v.content}
                                </div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-header">{$picName}</div>
                    <div class="layui-card-body">
                        <blockquote class="layui-elem-quote">Tips：点击列表中排序值，可进行重新排序哟！</blockquote>
                        <table id="list-table" lay-filter="test-table-toolbar">
                            <thead>
                                <tr>
                                    <th lay-data="{type:'checkbox',fixed: 'left', }"></th>
                                    <th lay-data="{field:'id', width:80,fixed: 'left', unresize: true, sort: true}">ID</th>
                                    <th lay-data="{field:'filename'}">图片名</th>
                                    <th lay-data="{field:'urlpath'}">图片</th>
                                    <th lay-data="{field:'content'}">介绍</th>
                                    <th lay-data="{field:'sort',width:100, sort: true,edit: 'text'}">排序</th>
                                    <th lay-data="{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {volist name="picture" id="v"}
                                <tr>
                                    <td><input type="checkbox" name=""></td>
                                    <td>{$v.id}</td>                                    
                                    <td>{$v.filename}</td>                                    
                                    <td><img src="{$v.urlpath}" class="showimg"></td>
                                    <td>{$v.content}</td>
                                    <td>{$v.sort}</td>
                                    <td>
                                            <!-- <a class="layui-btn " lay-event="edit">编辑</a> -->
                    <!-- <a class="layui-btn layui-btn-danger " lay-event="del">删除</a> -->
                                    </td>
                                </tr>
                                {/volist}
                            </tbody>
                        </table>
                        <!-- <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table> -->
                        <script type="text/html" id="test-table-toolbar-toolbarDemo">
                            <div class="layui-btn-container">
                <!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
                <button class="layui-btn layui-btn-sm" lay-event="add">添加图片</button>
              </div>
            </script>
                        <script type="text/html" id="test-table-toolbar-barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/layadmin/layui/layui.js"></script>
    <script>
    layui.config({
        base: '/static/layadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laypage', 'tree', 'util'], function() {
        var admin = layui.admin,
            table = layui.table,
            laypage = layui.laypage,
            $ = layui.$,
            form = layui.form,
            tree = layui.tree,
            util = layui.util;

        table.init('test-table-toolbar', {
            // height: 315 //设置高度
            // ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
            toolbar: '#test-table-toolbar-toolbarDemo',
            page: true //开启分页
            // ,limit: 3
        });

        //头工具栏事件
        table.on('toolbar(test-table-toolbar)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'add':
                    layer.open({
                        type: 2,
                        title: '添加图片',
                        content: '/admin/photo/addPic/fid/{$fid}', //这里content是一个普通的String
                        area: ['100%', '100%']
                    });
            };
        });

        //监听行工具事件
        table.on('tool(test-table-toolbar)', function(obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    $.get('{:url("admin/photo/index_del")}', { id: data.id }, function(ret) {
                        ret = $.parseJSON(ret);
                        if (ret.code == 0) { //添加失败
                            layer.msg(ret.msg, { icon: 5 })
                        } else { //添加成功
                            layer.msg(ret.msg, { icon: 6 }, function() {
                                // $(obj).parents("tr").remove();
                                obj.del();
                            })
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){   
                layer.open({
                  type: 2, 
                  title: '修改图片', 
                  content: '/admin/photo/editPic/fid/{$fid}/id/'+data.id, //这里content是一个普通的String
                  area: ['100%', '100%']
                });        
      }
        });
        //监听单元格编辑
        table.on('edit(test-table-toolbar)', function(obj) {
            var value = obj.value //得到修改后的值
                ,
                data = obj.data //得到所在行所有键值
                ,
                field = obj.field; //得到字段
            // console.log(data.id);
            $.get('{:url("admin/photo/indexSort")}', { id: data.id, sort: value }, function(ret) {
                ret = $.parseJSON(ret);
                // console.log(ret);
                if (ret.code == 0) { //添加失败
                    layer.msg(ret.msg, { icon: 5 }, function() {
                        window.location.reload();
                    });
                } else { //添加成功
                    layer.msg(ret.msg, { icon: 6 }, function() {
                        window.location.reload();
                    })
                }
            });
        });
        $('.add-photo').on('click', function() {
            var updid = $(this).attr("uppid");
            layer.open({
                type: 2,
                title: '修改{$fname}',
                content: '/admin/photo/addMess/fid/{$fid}/id/' + updid, //这里content是一个普通的String
                area: ['100%', '100%']
            });
        });
        $('.del-photo').on('click', function() {
            var updid = $(this).attr("uppid");
            layer.confirm('真的删除行么', function(index) {
                $.get('{:url("admin/photo/photo_del")}', { id: updid }, function(ret) {
                    ret = $.parseJSON(ret);
                    if (ret.code == 0) { //添加失败
                        layer.msg(ret.msg, { icon: 5 })
                    } else { //添加成功
                        layer.msg(ret.msg, { icon: 6 }, function() {
                          window.location.reload();
                            // $(obj).parents("tr").remove();
                            // obj.del();
                        })
                    }
                });
                layer.close(index);
            });
        });
        $('.showimg').on('click', function() {
            // 搜索条件
            var thumb = $(this).attr("src");
            // var turl;
            if (thumb) {
                window.open(thumb);
            }
        });

    });
    </script>
</body>

</html>